import styles from './dialog-message-actions.module.scss'
import {SessionConfig} from "@/types/chat";
import {userChatStore} from "@/app/store/chat-store";
import {ClearOutlined} from "@ant-design/icons";
import {Select} from "antd";
import {GptVersion} from "@/app/constants";
import {CSSProperties, useRef, useState} from "react";

function Action(props: {
    icon: JSX.Element,
    onClick: () => void,
    styles?: CSSProperties
}) {
    const {styles: sty} = props;
    return (
        <div className={styles["chat-input-action"]} onClick={props.onClick}>
            <div className={styles["icon"]}>
                {props.icon}
            </div>
        </div>
    )
}

export function ChatAction(props: {
    icon: JSX.Element,
    text?: string,
    onClick: () => void
}) {
    const iconRef = useRef<HTMLDivElement>(null);
    const textRef = useRef<HTMLDivElement>(null);
    const [width, setWidth] = useState({
        full: 16,
        icon: 16
    })

    function updateWidth() {
        if (!iconRef.current || !textRef.current) return;
        const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
        const iconWidth = getWidth(iconRef.current);
        const textWidth = getWidth(textRef.current);
        setWidth({
            full: iconWidth + textWidth,
            icon: iconWidth
        });
    }

    return (
        <div
            className={`${styles["chat-input-action"]} clickable`}
            onClick={() => {
                props.onClick();
                setTimeout(updateWidth, 1);
            }}
            onMouseEnter={updateWidth}
            onTouchStart={updateWidth}
            style={{
                "--icon-width": `${width.icon}px`,
                "--full-width": `${width.full}px`
            } as CSSProperties}
        >
            <div ref={iconRef} className={styles["icon"]}>
                {props.icon}
            </div>
            <div ref={textRef} className={styles["text"]}>
                {props.text}
            </div>
        </div>
    )
}

export default function DialogMessageActions(props: {
    config: SessionConfig
}) {
    const chatStore = userChatStore();
    const {config} = props;
    return (
        <div className={styles["chat-input-actions"]}>
            <Select
                value={config?.gptVersion ?? GptVersion.GLM_4_AIR}
                style={{width: 160}}
                options={[
                    {value: GptVersion.CHATGLM_6B_SSE, label: 'chatGLM_6b_SSE'},
                    {value: GptVersion.CHATGLM_LITE, label: 'chatglm_lite'},
                    {value: GptVersion.CHATGLM_LITE_32K, label: 'chatglm_lite_32k'},
                    {value: GptVersion.CHATGLM_STD, label: 'chatglm_std'},
                    {value: GptVersion.CHATGLM_PRO, label: 'chatglm_pro'},
                    {value: GptVersion.CHATGLM_TURBO, label: 'chatglm_turbo'},
                    {value: GptVersion.GLM_3_5_TURBO, label: 'glm-3-turbo'},
                    {value: GptVersion.GLM_4_AIR, label: 'glm-4-air'},
                    {value: GptVersion.GLM_4, label: 'glm-4'},
                    {value: GptVersion.GLM_4V, label: 'glm-4v'},
                    {value: GptVersion.COGVIEW_3, label: 'cogview-3'},
                ]}
                onChange={(value) => {
                    chatStore.updateCurrentSession((session) => {
                        session.config = {
                            ...session,
                            gptVersion: value
                        }
                    })
                }}
            />
            <ChatAction icon={<ClearOutlined/>} text="清除聊天" onClick={() => {
                chatStore.updateCurrentSession((session) => {
                    if (session.clearContextIndex === session.messages.length) {
                        session.clearContextIndex = undefined;
                    } else {
                        session.clearContextIndex = session.messages.length;
                    }
                })
            }}/>
        </div>
    )
}
